@mixin textComm() {
  background: linear-gradient(90deg, #ffbd8d 0%, #ffe5d8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

.vipBox {
  @apply flex flex-col items-center;

  .vipMeal {
    @apply flex justify-center z-2 relative;
    height: 18.75rem;
    margin-top: -5.625rem;
    margin-bottom: 5.375rem;

    .mealItem {
      @apply h-full relative flex flex-col items-center px-2;
      width: 26.25rem;
      background-image: url('/images/meal-bg.webp');
      background-size: 100% 100%;
      font-family: Alibaba PuHuiTi 2;

      &:not(:first-child) {
        @apply ml-10;
      }

      &.active {
        background-image: url('/images/meal-bg2.webp');

        .buy {
          @apply font-black;
          background: linear-gradient(90deg, #ffbd8d 0%, #ffe5d8 100%);
          color: #7c3c19;
        }
      }

      .cornerMark {
        @apply absolute inline-block h-9 leading-9 rounded font-bold text-lg text-center left-5 top-5 italic;
        width: 6.25rem;
        background: linear-gradient(251deg, #ffb9a7 0%, #ffe2b7 100%);
        font-family: REEJI-HonghuangLiGB;
        color: #503131;
      }

      .desc {
        @apply font-bold text-white mt-10 mb-5;
        font-size: 1.875rem;
        line-height: 1.875rem;
      }

      .price {
        @apply font-bold relative w-fit;
        line-height: 3.75rem;
        font-feature-settings: 'kern' on;

        & > span {
          @include textComm();
        }

        & > span:nth-child(1) {
          font-size: 1.875rem;
          margin-right: 0.625rem;
        }

        & > span:nth-child(2) {
          font-size: 3.75rem;
        }

        .popular {
          @apply h-7 leading-7 text-lg inline-block px-3 text-white absolute text-center font-bold;
          right: -6.25rem;
          top: -1.25rem;
          background: linear-gradient(90deg, #ff6a00 4%, #ff5543 96%);
          text-shadow: 0rem 2.1.3125rem 3.1.9375rem #e2092a;
          border-radius: 2rem;
          border-bottom-left-radius: 0;
        }
      }

      .discountMark {
        @apply text-lg;
        line-height: 1.125rem;
        color: rgba(255, 255, 255, 0.5);
        font-feature-settings: 'kern' on;
        margin-top: 0rem;
        margin-bottom: 2rem;
      }

      .buy {
        @apply text-white-60 absolute left-2/4;
        transform: translateX(-50%);
        bottom: 1.875rem;
        width: 17.5rem;
        height: 3.75rem;
        line-height: 3.75rem;
        border-radius: 2.6rem;
        background: rgba(85, 72, 82, 0.8);
        font-size: 1.5rem;
      }
    }
  }

  .vipTitle {
    @apply h-7 leading-7 w-fit;
    @include textComm();
    font-family: Alibaba PuHuiTi 2;
    font-size: 1.5rem;
  }

  .vipTips {
    @apply text-xl leading-5 text-white-80 mt-6 mb-10;
    font-family: Alibaba PuHuiTi 2;
    letter-spacing: 1em;
    font-feature-settings: 'kern' on;
  }

  .quanyi {
    @apply flex h-20 bg-black;

    .quanyiItem {
      @apply h-full text-center text-white-80 text-xl;
      font-family: Alibaba PuHuiTi 2;
      width: 25rem;
      line-height: 5rem;

      &:nth-child(1) {
        @apply text-left;
        padding-left: 3.125rem;
      }

      & > img {
        @apply inline-block;
        width: 0.875rem;
        height: 1.375rem;
      }

      &:nth-child(1) {
        @apply text-white-60;
      }

      &:nth-child(3) {
        @include textComm();
        @apply opacity-80;
      }
    }

    &:nth-child(2n) {
      background: #1e232a;
    }
  }

  .quanyiTitle {
    @apply flex h-20 bg-black;

    .quanyiItem {
      @apply h-full text-center text-white-80 relative;
      width: 25rem;
      line-height: 5rem;
      font-family: Alibaba PuHuiTi 2;
      font-size: 1.375rem;

      &:nth-child(1) {
        @apply text-left;
        padding-left: 3.125rem;
      }

      &:nth-child(3) > span:first-child {
        @include textComm();
        @apply opacity-80;
      }
    }

    .joinVip {
      @apply inline-block rounded relative ml-3 cursor-pointer;
      width: 8.125rem;
      height: 2.875rem;
      background: linear-gradient(90deg, #ffbd8d 0%, #ffe5d8 100%);
      font-family: Alibaba PuHuiTi 2;
      text-align: center;
      line-height: 2.875rem;
      font-feature-settings: 'kern' on;
      color: #522b16;

      &::before {
        @apply absolute top-2/4 w-0 h-0;
        left: -0.5rem;
        transform: translateY(-50%);
        content: '';
        border-top: 0.5rem solid transparent;
        border-bottom: 0.5rem solid transparent;
        border-right: 0.5rem solid #ffbd8d;
      }
    }
  }

  .vipQuanxian {
    @apply flex mt-5;
    height: 23.75rem;

    .quanxianItem {
      @apply h-full flex flex-col justify-center items-center;
      width: 20.9375rem;

      .iconBox {
        @apply flex items-center justify-center;
        width: 7.5rem;
        height: 7.5rem;
        border-radius: 1.5rem;
        background: #1e232a;

        & > img {
          @apply object-contain;
          width: 4.5rem;
          height: 4.5rem;
        }
      }

      .vtitle {
        @apply font-semibold mt-10 mb-5;
        line-height: 1.25rem;
        font-family: Alibaba PuHuiTi 2;
        font-size: 1.25rem;
        background: linear-gradient(90deg, #ffd6cb 0%, #ffe5d8 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-fill-color: transparent;
      }

      .vdesc {
        @apply text-sm text-center text-white-60;
        font-family: Alibaba PuHuiTi 2;
        padding-left: 2.75rem;
        padding-right: 2.4375rem;
        line-height: 1.875rem;
      }
    }
  }

  .vipTitle2 {
    @apply mt-20;
    margin-bottom: 2.0625rem;
  }

  .adv {
    @apply flex mt-5;
    height: 27.5rem;

    .advItem {
      @apply h-full flex flex-col items-center;
      background-color: #1e232a;
      width: 20rem;

      &:not(:first-child) {
        @apply ml-5;
      }

      .icon {
        @apply w-full object-cover;
        height: 13.75rem;
      }

      .vtitle {
        @apply font-semibold mt-6 mb-5 font-semibold;
        font-family: Alibaba PuHuiTi 2;
        background: linear-gradient(90deg, #ffd6cb 0%, #ffe5d8 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-fill-color: transparent;
      }

      .vdesc {
        @apply text-sm text-center text-white-60;
        font-family: Alibaba PuHuiTi 2;
        line-height: 1.875rem;
        padding: 0 2.125rem;
      }
    }
  }
}

@media screen and (max-width: 85rem) {
  .vipBox {
    .vipMeal {
      .mealItem {
        width: 25rem;
      }
    }

    .quanyi {
      .quanyiItem {
        font-size: 1rem;
        width: 21.25rem;
      }
    }

    .quanyiTitle {
      .quanyiItem {
        width: 21.25rem;
        font-size: 1.125rem;
      }
    }

    div.vipQuanxian1 {
      height: 16.25rem;

      .quanxianItem {
        justify-content: flex-start;
        width: 16.25rem;

        .iconBox {
          width: 6.25rem;
          height: 6.25rem;
        }

        .vtitle {
          @apply mt-6 mb-3;
          margin: 1.5rem auto 0.75rem;
        }

        .vdesc {
          padding: 0 1rem;
          line-height: 1.5rem;
        }
      }
    }

    .adv {
      @apply flex mt-5;
      height: 21.25rem;

      .advItem {
        width: 16.25rem;

        &:not(:first-child) {
          @apply ml-4;
        }

        .icon {
          @apply w-full object-cover;
          height: 8.75rem;
        }

        .vtitle {
          @apply mt-4 mb-2;
        }

        .vdesc {
          line-height: 1.5rem;
          padding: 0 1rem;
        }
      }
    }
  }
}

@media screen and (max-width: 81.875rem) {
  .vipBox {
    .vipMeal {
      .mealItem {
        width: 23.75rem;
      }
    }

    .vipQuanxian {
      height: 16.25rem;

      .quanxianItem {
        justify-content: flex-start;
        width: 13.125rem;

        .iconBox {
          width: 6.25rem;
          height: 6.25rem;
        }

        .vtitle {
          @apply mt-6 mb-3;
          margin: 1.5rem auto 0.75rem;
        }

        .vdesc {
          padding: 0 1rem;
          line-height: 1.5rem;
        }
      }
    }
  }
}

@media screen and (max-width: 77.5rem) {
  .vipBox {
    .vipMeal {
      .mealItem {
        width: 22.5rem;

        .price {
          & > span:nth-child(1) {
            font-size: 1.25rem;
          }

          & > span:nth-child(2) {
            font-size: 2.5rem;
          }

          .popular {
            @apply h-6 leading-6 text-base;
            right: -5rem;
          }
        }
      }
    }
  }
}

@media screen and (max-width: 73.125rem) {
  .vipBox {
    .vipMeal {
      .mealItem {
        width: 20rem;

        .price {
          & > span:nth-child(1) {
            font-size: 1.25rem;
          }

          & > span:nth-child(2) {
            font-size: 2.5rem;
          }

          .popular {
            @apply h-6 leading-6 text-base;
            right: -5rem;
          }
        }
      }
    }

    .quanyi {
      .quanyiItem {
        font-size: 1rem;
        width: 17.5rem;
      }
    }

    .quanyiTitle {
      .quanyiItem {
        width: 17.5rem;
        font-size: 1.125rem;
      }
    }
  }
}

@media screen and (max-width: 61.875rem) {
  .vipBox {
    .vipMeal {
      .mealItem {
        width: 17.5rem;

        .cornerMark {
          @apply h-7 leading-7 px-2 left-4 top-4 text-sm w-auto;
        }

        .price {
          & > span:nth-child(1) {
            font-size: 1.25rem;
          }

          & > span:nth-child(2) {
            font-size: 2.5rem;
          }

          .popular {
            @apply h-6 leading-6 text-base;
            right: -5rem;
          }
        }

        .buy {
          width: 13.75rem;
        }
      }
    }
  }
}

@media screen and (max-width: 57.5rem) {
  .vipBox {
    .vipMeal {
      .mealItem {
        width: 16.25rem;

        .cornerMark {
          @apply h-7 leading-7 px-2 left-2 top-2 text-sm w-auto;
        }

        .price {
          & > span:nth-child(1) {
            font-size: 1.25rem;
          }

          & > span:nth-child(2) {
            font-size: 2.5rem;
          }

          .popular {
            @apply h-5 leading-5 text-sm px-2;
            right: -3.75rem;
            top: -0.625rem;
          }
        }

        .buy {
          width: 13.75rem;
        }

        .cornerMark {
          @apply h-7 leading-7 text-base left-2 top-4;
          width: 5rem;
        }
      }
    }

    .quanyi {
      .quanyiItem {
        font-size: 1rem;
        width: 17.5rem;
      }
    }

    .quanyiTitle {
      .quanyiItem {
        width: 17.5rem;
        font-size: 1.125rem;
      }
    }

    .vipQuanxian {
      height: 16.25rem;

      .quanxianItem {
        justify-content: flex-start;
        width: 13.125rem;

        .iconBox {
          width: 6.25rem;
          height: 6.25rem;
        }

        .vtitle {
          @apply mt-6 mb-3;
          margin: 1.5rem auto 0.75rem;
        }

        .vdesc {
          padding: 0 1rem;
          line-height: 1.5rem;
        }
      }
    }

    .adv {
      @apply flex mt-5;
      height: 21.25rem;

      .advItem {
        width: 12.5rem;

        &:not(:first-child) {
          @apply ml-4;
        }

        .icon {
          @apply w-full object-cover;
          height: 8.75rem;
        }

        .vtitle {
          @apply mt-4 mb-2;
        }

        .vdesc {
          line-height: 1.5rem;
          padding: 0 1rem;
        }
      }
    }
  }
}
